<!DOCTYPE html>
<!--根标签  标签属性-->
<!--三个部分：结构（html标签）、表现（CSS）、行为（javascript--jquery框架）-->
<html lang="en">
<head><!--头部-->
    <meta charset="UTF-8">
    <title>首页</title>
    <!--样式标签-->
    <style>
        div {
            display: block;
        }

        .blue-b {
            background: #19a8cc;
            float: left;
            width: 100%;
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
        }

        .navbar-brand {
            float: left;
            height: 50px;
            padding: 15px 15px;
            font-size: 18px;
            line-height: 20px;
        }

        a {
            color: #337ab7;
            text-decoration: none;
            background-color: transparent;
        }

        .list-left {
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
            float: left;
        }

        .user-panel {
            height: 60px;
            margin-top: 5px;
            padding: 15px 5px 15px 5px;
        }

        .info {
            padding: 5px 5px 5px 15px;
        }

        .pull-left {
            float: left !important;
        }

        p {
            margin: 0 0 10px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

        .glyphicon {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        element.style {
            color: #00a65a;
        }

        .glyphicon {
            position: relative;
            top: 1px;
            display: inline-block;
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        small {
            font-size: 85%;
        }

        .search-input {
            border: 1px solid transparent;
            height: 35px;
            width: 85%;
            border-bottom-left-radius: 2px;
            border-top-left-radius: 2px;
            background: #374850;
            text-indent: 10px;
            font-size: 13px;
            outline: none;
            font-family: inherit;
            line-height: inherit;
            margin: 0;
            font: inherit;
            color: inherit;
        }

        .panel-group {
            margin-bottom: 20px;
        }

        .panel-group .panel {
            margin-bottom: 0;
            border-radius: 4px;
        }

        .panel-default {
            border: none;
        }

        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
            box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
        }

        #accordion .panel-default > .panel-heading, .panel {
            background-color: #222d32;
        }

        .panel-default > .panel-heading {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
        }

        .panel-group .panel-heading {
            border-bottom: 0;
        }

        .panel-heading {
            padding: 0;
        }

        .panel-heading {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        #accordion a {
            color: #b8c7ce;
            font-size: 13px;
        }

        .panel-heading .open-menu {
            border-left: 3px solid transparent !important;
        }

        .open-menu {
            display: block;
            border: 0px solid red;
            height: 40px;
            padding: 10px 0 10px 20px;
        }

        a {
            color: #337ab7;
            text-decoration: none;
        }

        a {
            background-color: transparent;
        }

        #accordion .panel .panel-collapse {
            background: #2c3b41;
            /* padding: 6px; */
        }

        .collapse.in {
            display: block;
        }

        .collapse {
            display: none;
        }

        #accordion ul {
            margin-bottom: -6px;
        }

        ol, ul {
            margin-top: 0;
            margin-bottom: 10px;
        }

        #accordion .panel .panel-collapse li {
            padding: 6px;
        }

        li {
            list-style: none;
            text-align: left;
        }

        #accordion li a {
            display: block;
            height: 26px;
            width: 160px;
            border: 0px solid green;
        }

        #accordion a {
            color: #b8c7ce;
            font-size: 13px;
        }

        a {
            color: #337ab7;
            text-decoration: none;
        }

        a {
            background-color: transparent;
        }

        .moredeep {
            position: absolute;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
            width: 83.33333333%;
            float: left;
            top: 50px;
        }

        .row {
            margin-right: 0px;
            margin-left: 0px;
        }

        .box-header {
            color: #444;
            display: block;
            padding: 12px;
            position: relative;
            border-bottom: 1px solid #f4f4f4;
            top: 20px;
        }

        .box-header .box-title {
            display: inline-block;
            font-size: 18px;
            margin: 0;
            line-height: 1;
        }

        .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
            font-family: inherit;
            font-weight: 500;
            line-height: 1.1;
            color: inherit;
        }

        .label {
            display: inline;
            padding: 0.2em 0.6em 0.3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25em;
        }

        .box-header > .box-tools {
            position: absolute;
            right: 10px;
            top: 5px;
        }

        .input-group {
            position: relative;
            display: table;
            border-collapse: separate;
        }

        .label-success {
            background-color: #5cb85c;
        }

        .no-padding {
            padding: 0 !important;
        }

        .box-body {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            padding: 10px;
            position: relative;
            top: 20px;
        }

        .table-responsive {
            min-height: .01%;
            overflow-x: auto;
            position: relative;
            top: 20px;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }

        table {
            background-color: transparent;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        tbody {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
        }

        .table-striped > tbody > tr:nth-of-type(odd) {
            background-color: #f9f9f9;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 8px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        th {
            text-align: left;
        }

        td, th {
            padding: 0;
        }

        .xiugai:visited {
            color: #337ab7 !important;
        }

        .table .label {
            padding: 0.4em 0.6em 0.3em;
            line-height: 22px;
        }

        .xiugai {
            color: #337ab7 !important;
        }

        .shanchu {
            color: #d9534f !important;
        }

        .label {
            font-weight: 400;
        }

        .bgc-w {
            background-color: #fff;
        }

        .box {
            position: relative;
            border-radius: 3px;
            background: #ffffff;
            border-top: 3px solid #d2d6de;
            margin-bottom: 20px;
            width: 100%;
            height: 711px;
            box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
        }

        form {
            display: block;
            margin-top: 0em;
            margin-block-end: 1em;
            height: 711px;
        }

        .box-header {
            color: #444;
            display: block;
            padding: 12px;
            position: relative;
            border-bottom: 1px solid #f4f4f4;
        }

        .box-header .box-title {
            display: inline-block;
            font-size: 18px;
            margin: 0;
            line-height: 1;
        }

        .no-padding {
            padding: 0 !important;
        }

        .box-body {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            padding: 10px;
            height: 711px;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

        .alert-dismissable, .alert-dismissible {
            padding-right: 35px;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-dismissable .close, .alert-dismissible .close {
            position: relative;
            top: -2px;
            right: -21px;
            color: inherit;
        }

        button.close {
            -webkit-appearance: none;
            padding: 0;
            cursor: pointer;
            background: 0 0;
            border: 0;
        }

        .row {
            margin-right: 0px;
            margin-left: 0px;
        }

        .form-group {
            margin-bottom: 15px;
            margin-bottom: 15px;
            float: left;
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
            width: 50%;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .form-control {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
            box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }

        button, input, select, textarea {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }
    </style>
    <!--引入js文件-->
    <script src="js/jquery.js"></script>
</head>
<!--身体：展示网页内容-->
<body>

<!--div页面结构的划分  style属性：样式-->
<div>
    <!--左导航栏-->
    <div style="padding: 0; margin: 0; display: block;width: 237px">
        <!--左上导航栏-->
        <div class="blue-b" style="width:237px;height:50px">
            <a class="navbar-brand" style="padding: 8px 40px;">
                <!--展示图片-->
                <img src="imgs/logo.png">
            </a>
        </div>
        <!--左下导航栏-->
        <div class="list-left" style="background: rgb(34, 45, 50); height: 850px;width:237px">
            <div class="user-panel">
                <div class="pull-left" style="width:45px;height:60px">
                    <img src="imgs/oasys.jpg" style="width:45px;height:60px">
                </div>
                <div class="pull-left info">
                    <p style="color: #fff; line-height: 1.5;">
                        <span>soli</span>
                        <br>
                        <small class="glyphicon glyphicon-record" style="color: #00a65a;">
                            "在线"
                        </small>
                    </p>
                </div>
            </div>
            <div class="thistable">
                <div style="position: relative; margin-top: 20px;width:207px;height:35px">
                    <input type="text" placeholder="查找..." class="search-input cha">
                </div>
                <div class="panel-group" id="accordion" style="margin-top: 10px; margin-left: -12px;">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="usermanege">
                            <a class="open-menu blue-left" href="javascript:void(0)" data-toggle="collapse"
                               data-parent="#accordion" style="border-left: 3px solid rgb(0, 166, 90);"
                               aria-expanded="true">
                                <span class="glyphicon glyphicon-education"></span> <span>用户管理</span>
                            </a>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse in" aria-expanded="true"
                             style="display: none">
                            <ul>
                                <li>
                                    <a href="javascript:void(0)" id="getbuMenlist"> <span
                                            class="glyphicon glyphicon-record"></span> <span>部门管理</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:changepath('/morelogrecord');"> <span
                                            class="glyphicon glyphicon-record"></span> <span>在线用户</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:changepath('/positionmanage');"> <span
                                            class="glyphicon glyphicon-record"></span> <span>职位管理</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:void(0)" id="getuserlist"> <span
                                            class="glyphicon glyphicon-record"></span> <span>用户管理</span>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!--左导航栏结束-->
    <!--右列表-->
    <div class="col-md-10 moredeep" style="padding: 0; margin: 0;">
        <div style="padding: 0; margin: 0; display: block;">
            <button id="logout" class="but" type="button" >登出</button>
        </div>
        <!--右下列表-->
        <div class="col-md-12 list-right"
             style="background: rgb(236, 240, 245); position: absolute;left:237px;width:1186px; height: 50px; padding: 0px;min-height: 1px;top: 10px">
            <!--用户管理-->
            <div class="row" style="padding-top: 10px;">
                <div class="col-md-2"
                     style="    float: left;position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;font-size: 14px;width: 16.66666667%;font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;">
                    <h1 style="font-size: 24px; margin: 0;" class="">用户管理</h1>
                </div>
                <div class="col-md-10 text-right"
                     style="    width: 83.33333333%;float: left;position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;text-align: right;font-size: 14px;">
                    <a href="##"
                       style="color: black;text-decoration: none;background-color: transparent;font-size: 14px;text-align: right;"><span
                            class="glyphicon glyphicon-home"></span> 首页</a> &gt;
                    <a disabled="disabled"
                       style="color: black;text-decoration: none;background-color: transparent;font-size: 14px;text-align: right;">用户管理</a>
                </div>
            </div>
            <!--表格-->
            <div class="col-md-12 thistable"
                 style="width: 100%;float: left;position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;    font-size: 14px;">
                <div class="box-header" id="header1">
                    <h3 class="box-title" id="add">
                        <a href="javascript:void(0)" class="label label-success" style="padding: 5px;">
                            <span class="glyphicon glyphicon-plus"></span> 新增用户
                        </a>
                    </h3>
                    <h3 class="box-title" id="addbumen">
                        <a href="javascript:void(0)" class="label label-success" style="padding: 5px;">
                            <span class="glyphicon glyphicon-plus"></span> 新增部门
                        </a>
                    </h3>
                    <div class="box-tools">
                        <div class="input-group" style="width: 150px;">
                            <input type="text" class="form-control input-sm usersearch" placeholder="查找...">
                            <div class="input-group-btn">
                                <a class="btn btn-sm btn-default"><span
                                        class="glyphicon glyphicon-search usersearchgo"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--身体-->
                <div class="box-body no-padding">
                    <div class="table-responsive"></div>
                    <!--新增的表单-->
                    <div style="float: left;position: relative;min-height: 1px;display:none;height:711px" id="newform">
                        <div class="bgc-w box">
                            <!--form表单通常用来做页面输入的提交。action属性可以写提交的地址，method属性可以设置请求的方式-->
                            <form>
                                <div class="box-header">
                                    <h3 class="box-title">
                                        <a href="javascript:history.back();" class="label label-default"
                                           style="padding: 5px;">
                                            <i class="glyphicon glyphicon-chevron-left"></i> <span>返回</span>
                                        </a>
                                    </h3>
                                </div>
                                <!--盒子身体-->
                                <div class="box-body no-padding">
                                    <div class="box-body">
                                        <div class="alert alert-danger alert-dismissable" role="alert"
                                             style="display: none;">
                                            错误信息:
                                            <button class="close thisclose" type="button">×</button>
                                            <span class="error-mess"></span>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"><span>用户名</span></label> <input
                                                    name="userName" class="form-control usernameonliy" value="">
                                                <input type="hidden" class="usernameonliyvalue" value="true">
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"><span>电话</span></label> <input
                                                    name="userTel" class="form-control" value="">
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"><span>真实姓名</span></label> <input
                                                    name="realName" class="form-control" value="">
                                            </div>

                                            <div class="col-md-6 form-group">
                                                <label class="control-label"> <span>部门</span></label>
                                                <select class="deptselect form-control" name="deptid">
                                                    <option value="1">总经办</option>
                                                    <option value="2">研发部</option>
                                                    <option value="3">财务部</option>
                                                    <option value="4">市场部</option>
                                                    <option value="5">人事部</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"> <span>角色</span>
                                                </label> <select class="form-control" name="roleid">
                                                <option value="1">超级管理员</option>
                                                <option value="2">CEO</option>
                                                <option value="3">总经理</option>
                                                <option value="4">部门经理</option>
                                                <option value="5">职员</option>
                                                <option value="6">实习生</option>
                                                <option value="7">试用生</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"><span>工资</span></label> <input
                                                    name="salary" class="form-control" value="">
                                            </div>

                                        </div>
                                        <!--盒子尾-->
                                        <div class="box-footer"
                                             style="position: relative;left:950px;float:left;top: 50px">
                                            <!--input 的type属性如果是submit那么可以实现发送请求-->
                                            <input class="btn btn-primary" id="save" type="button" value="保存">
                                            <input class="btn btn-default" id="cancel" type="button" value="取消"
                                                   onclick="window.history.back();">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div style="float: left;position: relative;min-height: 1px;display:none;height:711px" id="newformbumen">
                        <div class="bgc-w box">
                            <!--form表单通常用来做页面输入的提交。action属性可以写提交的地址，method属性可以设置请求的方式-->
                            <form>
                                <div class="box-header">
                                    <h3 class="box-title">
                                        <a href="javascript:history.back();" class="label label-default"
                                           style="padding: 5px;">
                                            <i class="glyphicon glyphicon-chevron-left"></i> <span>返回</span>
                                        </a>
                                    </h3>
                                </div>
                                <!--盒子身体-->
                                <div class="box-body no-padding">
                                    <div class="box-body">
                                        <div class="alert alert-danger alert-dismissable" role="alert"
                                             style="display: none;">
                                            错误信息:
                                            <button class="close thisclose" type="button">×</button>
                                            <span class="error-mess"></span>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"><span>部门名称</span></label> <input
                                                    name="buMenName" class="form-control usernameonliy" value="">
                                                <input type="hidden" class="usernameonliyvalue" value="true">
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"><span>部门电话</span></label> <input
                                                    name="buMenTel" class="form-control" value="">
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"><span>部门邮箱</span></label> <input
                                                    name="buMenEmile" class="form-control" value="">
                                            </div>
                                            <div class="col-md-6 form-group">
                                                <label class="control-label"><span>部门地址</span></label> <input
                                                    name="buMenAddress" class="form-control" value="">
                                            </div>
                                        </div>
                                        <!--盒子尾-->
                                        <div class="box-footer"
                                             style="position: relative;left:950px;float:left;top: 50px">
                                            <!--input 的type属性如果是submit那么可以实现发送请求-->
                                            <input class="btn btn-primary" id="savebumen" type="button" value="保存">
                                            <input class="btn btn-default" id="cancelbumen" type="button" value="取消"
                                                   onclick="window.history.back();">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
<script>
    $("#logout").click(function () {
        $.ajax({
            url:"logout",
            type:"POST",
            success:function({code, msg}){  /*返回值可以直接使用大括号解析*/
                if (code == 200) {
                    window.location.href = '/index.html';
                } else {
                    alert(msg);
                }
            }
        })
    })
    console.log($);//打印jQuery
    /*
    * 1.获取到标签[标签名获取、id属性[#id值]、class属性获取]
    * 2.绑定事件
    * 3.实现具体的功能
    * */
    console.log($("#usermanege"));
    //设置flag 来表示是隐藏了还是显示了
    var flag = true;//声明一个变量
    $("#usermanege").click(function () {
        if (flag) {
            $("#collapse2").show();
            flag = false;
        } else {
            $("#collapse2").hide();
            flag = true;
        }
    });
    // function click(){//定义函数--实现某个功能的代码写在函数里
    //
    // }
    $("#getuserlist").click(function () {
        //逻辑代码
        /*
        * 1.发生请求到服务器 （ajax）
        *    应用部署的地址 （http://localhost:8899）访问资源具体路（/user/list） 请求的参数（?_=1656835935067）
        * */
        //var obj = {name:"zs",age:12} js对象
        //调用方法
        getAllUsers();
    });
    $("#getbuMenlist").click(function () {
        //逻辑代码
        /*
        * 1.发生请求到服务器 （ajax）
        *    应用部署的地址 （http://localhost:8899）访问资源具体路（/user/list） 请求的参数（?_=1656835935067）
        * */
        //var obj = {name:"zs",age:12} js对象
        //调用方法
        getAllBuMen();
    });

    //查询所有
    function getAllUsers() {
        $.ajax({
            //dataType:  "json",//服务器返回的数据类型
            //data:"",  //发生给服务器的数据，如果请求是查询所有数据，一般不需要传值
            url: "user/list",//请求的地址(必须写)
            type: "GET",//指定请求的方式（get、post）
            cache: false,  //发送相同的请求是否从缓存中读取数据
            success: function (data) {//data 接受后台响应数据
                //把数据插入到页面--》table-responsive
                var tableHtml = "<table class='table table-hover table-striped'>";
                tableHtml = tableHtml + "<thead><tr><th>部门</th>";
                tableHtml = tableHtml + "<th>真实姓名</th><th>用户名</th><th>角色</th>";
                tableHtml = tableHtml + "<th>电话</th><th>工资</th><th>操作</th></thead>";
                tableHtml = tableHtml + "<tbody>"
                for (var i = 0; i < data.length; i++) {
                    tableHtml = tableHtml + "<tr><td>" + data[i].buMen + "</td>";
                    tableHtml = tableHtml + "<td>" + data[i].realName + "</td>";
                    tableHtml = tableHtml + "<td>" + data[i].userName + "</td>";
                    tableHtml = tableHtml + "<td>" + data[i].userRole + "</td>";
                    tableHtml = tableHtml + "<td>" + data[i].userPhones + "</td>";
                    tableHtml = tableHtml + "<td>" + data[i].userGongZi + "</td>";
                    /*JSON 是一个js提供json字符串工具
                    * JSON字符串：通常用于作为前后端数据传输的方式。格式：{"参数名":参数值}
                    * JSON.stringify(data[i])--把对象解析成json字符串
                    * JSON.parse（）--把json字符串解析成对象
                    * */
                    tableHtml = tableHtml + "<td><a href='javascript:void(0)' class='label xiugai' onclick='editUser(" + JSON.stringify(data[i]) + ")'>修改</a>";
                    /*  绑定事件1.获取到标签之后绑定 2.在标签中通过属性方式来绑定（事件名='绑定的函数名'）*/
                    tableHtml = tableHtml + "<a href='javascript:void(0)' class='label shanchu' onclick='deleteUser(" + data[i].id + ")'>删除</a></td></tr>"
                }
                tableHtml = tableHtml + "</tbody></table>";
                $("#newform").hide();
                $("#header1").show();
                $(".table-responsive").empty();//先清除掉原有的数据
                $(".table-responsive").append(tableHtml);

            },//如果请求成功的话，要做什么操作
            error: function () {
            },//如果请求失败的话，要做什么操作
        });
    }
    function getAllBuMen() {
        $.ajax({
            url: "buMen/list",//请求的地址(必须写)
            type: "GET",//指定请求的方式（get、post）
            cache: false,  //发送相同的请求是否从缓存中读取数据
            success: function (data) {//data 接受后台响应数据
                var tableHtml = "<table class='table table-hover table-striped'>";
                tableHtml = tableHtml + "<thead><tr><th>名称</th>";
                tableHtml = tableHtml + "<th>电话</th><th>邮箱</th>";
                tableHtml = tableHtml + "<th>地址</th><th>操作</th></thead>";
                tableHtml = tableHtml + "<tbody>"
                for (var i = 0; i < data.length; i++) {
                    tableHtml = tableHtml + "<tr><td>" + data[i].mingCheng + "</td>";
                    tableHtml = tableHtml + "<td>" + data[i].bmPhone + "</td>";
                    tableHtml = tableHtml + "<td>" + data[i].bmEmile + "</td>";
                    tableHtml = tableHtml + "<td>" + data[i].bmAddress + "</td>";
                    tableHtml = tableHtml + "<td><a href='javascript:void(0)' class='label xiugai' onclick='editBuMen(" + JSON.stringify(data[i]) + ")'>修改</a>";
                    tableHtml = tableHtml + "<a href='javascript:void(0)' class='label shanchu' onclick='deleteBuMen(" + data[i].id + ")'>删除</a></td></tr>"
                }
                tableHtml = tableHtml + "</tbody></table>";

                $(".table-responsive").empty();//先清除掉原有的数据
                $(".table-responsive").append(tableHtml);
            },//如果请求成功的话，要做什么操作
            error: function () {
            },//如果请求失败的话，要做什么操作
        });
    }

    //删除功能
    function deleteUser(id) {
        console.log(id)
        $.ajax({
            url: "user/delete",
            data: "id=" + id,//data 传输到服务端的数据 参数名=数值&参数名2=数值
            type: "POST",
            success: function (data) {
                if (data) {
                    //提示
                    alert("删除成功！");
                    getAllUsers();
                } else {
                    alert("删除失败！");
                }
            }
        })
    }
    function deleteBuMen(id) {
        console.log(id)
        $.ajax({
            url: "buMen/delete",
            data: "id=" + id,//data 传输到服务端的数据 参数名=数值&参数名2=数值
            type: "POST",
            success: function (data) {
                if (data) {
                    //提示
                    alert("删除成功！");
                    getAllBuMen();
                } else {
                    alert("删除失败！");
                }
            }
        })
    }
    //显示表单

    $("#add").click(function (e) {
        $(".table-responsive").empty();
        $("#header1").hide();
        $("#newform").show();
    })
    var saveOrUpdate = -1;
    //新增的请求

    $("#save").click(function () {
        //发送的数据
        var tel = $("input[name='userTel']").val();
        var realName = $("input[name='realName']").val();
        var dep = $("select[name='deptid'] option:selected").text();
        var userName = $("input[name='userName']").val();
        var role = $("select[name='roleid'] option:selected").text();
        var salary = $("input[name='salary']").val();
        var sendData = "buMen=" + dep + "&realName=" + realName + "&userName=" + userName + "&userRole="
            + role + "&userPhones=" + tel + "&userGongZi=" + salary + "&id=" + id;
        if (saveOrUpdate == -1) {
            $.ajax({
                url: "user/new",
                data: sendData,
                type: "POST",
                success: function (data) {
                    if (data) {
                        alert("添加成功")
                        $("#newform").hide();
                        $(".table-responsive").empty();
                        getAllUsers();
                    } else {
                        alert("添加失败")
                    }
                }
            })
        } else if (saveOrUpdate == 1) {//修改操作
            $.ajax({
                url: "user/edit",
                data: sendData,
                type: "POST",
                success: function (data) {
                    if (data) {
                        alert("修改成功")
                        $("#newform").hide();
                        $(".table-responsive").empty();
                        getAllUsers();
                    } else {
                        alert("修改失败")
                    }
                }
            })
            saveOrUpdate == -1;//改回操作标志，避免一直发送修改请求
        }

    })
    //编辑
    var id = 0;

    function editUser(user) {
        console.log(user)
        var tel = $("input[name='userTel']").val(user.userPhones);

        var realName = $("input[name='realName']").val(user.realName);
        var buMen = user.buMen;
        $("select[name='deptid'] option").each(function () {
            if ($(this).text() == buMen) {
                $(this).prop("selected", true);
            }
        });
        var userRole = user.userRole
        $("select[name='roleid'] option").each(function () {
            if ($(this).text() == userRole) {
                $(this).prop("selected", true);
            }
        });

        var userName = $("input[name='userName']").val(user.userName);

        var role = $("select[name='roleid'] option:selected").text();

        var salary = $("input[name='salary']").val(user.userGongZi);

        $(".table-responsive").empty();
        $("#header1").hide();
        $("#newform").show();
        saveOrUpdate = 1;//表示现在是修改操作
        id = user.id;
    }

    $("#addbumen").click(function (e) {
        $(".table-responsive").empty();
        $("#header1").hide();
        $("#newformbumen").show();
    })
    var saveOrUpdate = -1;
    //新增的请求

    $("#savebumen").click(function () {
        //发送的数据
        var buMenTel = $("input[name='buMenTel']").val();
        var buMenName = $("input[name='buMenName']").val();
        var buMenEmile = $("input[name='buMenEmile']").val();
        var buMenAddress = $("input[name='buMenAddress']").val();
        var sendData = "mingCheng=" + buMenName + "&bmPhone=" + buMenTel + "&bmEmile=" + buMenEmile + "&bmAddress="
            + buMenAddress + "&id=" + id;
        if (saveOrUpdate == -1) {
            $.ajax({
                url: "buMen/new",
                data: sendData,
                type: "POST",
                success: function (data) {
                    if (data) {
                        alert("添加成功")
                        $("#newformbumen").hide();
                        $(".table-responsive").empty();
                        getAllBuMen();
                    } else {
                        alert("添加失败")
                    }
                }
            })
        } else if (saveOrUpdate == 1) {//修改操作
            $.ajax({
                url: "buMen/edit",
                data: sendData,
                type: "POST",
                success: function (data) {
                    if (data) {
                        alert("修改成功")
                        $("#newformbumen").hide();
                        $(".table-responsive").empty();
                        getAllBuMen();
                    } else {
                        alert("修改失败")
                    }
                }
            })
            saveOrUpdate == -1;//改回操作标志，避免一直发送修改请求
        }

    })
    //编辑
    var id = 0;

    function editBuMen(buMen) {
        console.log(buMen)
        var buMenTel = $("input[name='buMenTel']").val(buMen.bmPhone);
        var buMenName = $("input[name='buMenName']").val(buMen.mingCheng);
        var buMenEmile = $("input[name='buMenEmile']").val(buMen.bmEmile);
        var bmAddress = $("input[name='bmAddress']").val(buMen.bmAddress);

        $(".table-responsive").empty();
        $("#header1").hide();
        $("#newformbumen").show();
        saveOrUpdate = 1;//表示现在是修改操作
        id = buMen.id;
    }
</script>
</body>
</html>